<template>
  <div id="index">
    <div class="box">
      <header></header>
      <nav>
        <router-link :to="{ name: 'Recommend' }">推荐音乐</router-link>
        <router-link to="/hot">热歌榜</router-link>
        <router-link to="/search">搜索</router-link>
      </nav>
    </div>

    <main>
      <transition name="index" mode="out-in">
        <router-view></router-view>
      </transition>
    </main>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" >
@import "./Index.scss";
#index {
  .box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  main {
    margin-top: _vw(130);
    overflow: hidden;
  }
}
</style>